<template>
  <div class="box">
    <div class="inp"><input type="text" /> <button>搜索</button></div>
    <div class="mainbox">
      <div class="leftbox">
        <div
          style="margin-top: 10px"
          v-for="(item, index) in list"
          :class="index == twoIndex ? 'active' : ''"
          @click="() => changeTwoIndex(index)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="rightbox">
        <div class="bs">
          <div>
            <span
              style="margin-left: 10px"
              v-for="(item, index) in twoList"
              :class="index == goodsIndex ? 'active' : ''"
              @click="() => changeGoodsIndex(index)"
              >{{ item.name }}</span
            >
          </div>
          <Item v-for="(item, index) in goodsList" :item="item"></Item>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="js">
import {getClassfiyList,getClassfiyData} from "@/api/classfiy"
import Item from "@/components/Item.vue"
import BScroll from "better-scroll"
export default {
  components:{
    Item
  },
    data(){
        return{
          list:[],
          twoList:[],
          goodsList:[],
          twoIndex:0,
          goodsIndex:0,
        }
    },
    mounted(){
this.getlist()
this.bs()
    },
    methods:{
        async getlist(){
            let res=await getClassfiyList()
            this.list=res.data
            this.twoList=res.data[this.twoIndex].children
            let obj={
              type_id:res.data[this.twoIndex].id,
              category_id :res.data[this.twoIndex].children[this.goodsIndex].id
            }
            let arr=await getClassfiyData(obj)
            this.goodsList=arr.data
            debugger
        },
        changeTwoIndex(index){
          this.twoIndex=index;
          this.goodsIndex=0
   this.getlist()
          },
          changeGoodsIndex(index){
            this.goodsIndex=index
            this.getlist()
          },
          bs(){
let bs=new BScroll(".rightbox", {
  scrollY:true,
  click:true,
      pullUpLoad: true,
      pullDownRefresh: true,
    })
    bs.refresh()
    console.log(bs);
          }
    },


}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: calc(100vh - 50px);
  overflow: hidden;
}
.inp {
  width: 100%;
  height: 50px;
}
.mainbox {
  width: 100%;
  height: calc(100vh -100px);
  display: flex;
  justify-content: flex-start;
  .leftbox {
    width: 100px;
  }
  .rightbox {
    height: calc(100vh - 100px);
    overflow: hidden;
  }
  .active {
    color: red;
  }
}
</style>
